<template>
  <div class="article-edit-container">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="10" animated />
    </div>

    <!-- 编辑表单 -->
    <div v-else-if="articleData" class="edit-form">
      <ArticlePublishForm
        :article-data="articleData"
        :is-edit-mode="true"
        @save="handleSave"
        @cancel="handleCancel"
      />
    </div>

    <!-- 错误状态 -->
    <div v-else class="error-container">
      <el-result
        icon="error"
        title="文章加载失败"
        sub-title="无法加载文章数据，请检查文章ID是否正确"
      >
        <template #extra>
          <el-button type="primary" @click="handleGoBack">
            返回文章列表
          </el-button>
        </template>
      </el-result>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {
  getMyArticleDetailApi,
  updateArticleApi,
  type ArticlePublishResponse,
  type UpdateArticleRequest
} from "@/api/user-article";

// 这里应该导入文章发布表单组件，但为了简化，我们直接在这里处理
// import ArticlePublishForm from "../publish/components/ArticlePublishForm.vue";

defineOptions({
  name: "ArticleEdit"
});

// 路由
const route = useRoute();
const router = useRouter();

// 响应式数据
const loading = ref(true);
const articleData = ref<ArticlePublishResponse | null>(null);

// 获取文章ID
const articleId = computed(() => {
  const id = route.params.id;
  return typeof id === "string" ? parseInt(id) : 0;
});

// 初始化
onMounted(async () => {
  if (articleId.value) {
    await loadArticleData();
  } else {
    ElMessage.error("文章ID无效");
    router.push("/user/article/my");
  }
});

// 加载文章数据
const loadArticleData = async () => {
  try {
    loading.value = true;
    const { data } = await getMyArticleDetailApi(articleId.value);

    if (data.code === 200 && data.data) {
      articleData.value = data.data;
    } else {
      ElMessage.error(data.message || "加载文章失败");
      articleData.value = null;
    }
  } catch (error) {
    console.error("加载文章失败:", error);
    ElMessage.error("加载文章失败");
    articleData.value = null;
  } finally {
    loading.value = false;
  }
};

// 保存文章
const handleSave = async (formData: UpdateArticleRequest) => {
  try {
    const { data } = await updateArticleApi({
      ...formData,
      id: articleId.value
    });

    if (data.code === 200) {
      ElMessage.success("文章更新成功");
      router.push("/user/article/my");
    } else {
      ElMessage.error(data.message || "更新失败");
    }
  } catch (error) {
    console.error("更新文章失败:", error);
    ElMessage.error("更新文章失败");
  }
};

// 取消编辑
const handleCancel = () => {
  router.push("/user/article/my");
};

// 返回文章列表
const handleGoBack = () => {
  router.push("/user/article/my");
};
</script>

<style lang="scss" scoped>
.article-edit-container {
  min-height: 100vh;
  background: #f8f9fa;

  .loading-container {
    max-width: 1200px;
    padding: 40px;
    margin: 0 auto;
  }

  .edit-form {
    // 样式将由子组件处理
  }

  .error-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 40px;

    :deep(.el-result) {
      .el-button {
        font-weight: 500;
        background: #1890ff;
        border-color: #1890ff;
        border-radius: 8px;

        &:hover {
          background: #40a9ff;
          border-color: #40a9ff;
        }
      }
    }
  }
}
</style>
